<template>
    <v-card class="mt-2">
        <v-toolbar class="elevation-0">
            <v-flex xs2>
                <span class="subheading">状态：</span>
                <v-btn-toggle mandatory v-model.lazy="status">
                    <v-btn :value="0" large>
                        全部
                    </v-btn>
                    <v-btn :value="true" large>
                        已支付
                    </v-btn>
                    <v-btn :value="false" large>
                        已完成
                    </v-btn>
                </v-btn-toggle>
            </v-flex>
            <v-spacer></v-spacer>
            <v-spacer></v-spacer>
            <v-flex xs2>
                <v-text-field label="订单编号" class="mb-2" box @keyup.enter="refresh"
                              hide-details v-model="search.id" append-icon="search"
                              @click:append="refresh"
                ></v-text-field>
            </v-flex>

        </v-toolbar>
        <v-divider/>
        <v-data-table
                :headers="headers"
                :items="orderList"
                :pagination.sync="pagination"
                :total-items="totalOrders"
                :loading="loading"
                class="elevation-1"
        >
            <template slot="items" slot-scope="props">
                <td class="text-xs-center">{{ props.item.id }}</td>
                <td class="text-xs-center">{{ props.item.memberid }}</td>
                <td class="text-xs-center">{{props.item.createtime}}</td>
                <td class="text-xs-center">{{ props.item.subtotal }}</td>
                <td class="text-xs-center">{{ props.item.state }}</td>
                <td class="justify-center layout px-0">
                    <v-tooltip left>
                        <v-btn slot="activator" icon @click="goodsDetail(props.item.id)">
                            <i class="el-icon-search"/>
                        </v-btn>
                        <span> 查看商品</span>
                    </v-tooltip>
                    <v-tooltip left>
                        <v-btn slot="activator" icon @click="editGoods(props.item)">
                            <i class="el-icon-edit"/>
                        </v-btn>
                        <span> 修改商品</span>
                    </v-tooltip>
                    <v-tooltip left>
                        <v-btn icon slot="activator" @click="deleteGoods(props.item)">
                            <i class="el-icon-delete"/>
                        </v-btn>
                        <span> 删除商品</span>
                    </v-tooltip>
                    <v-tooltip left>
                        <v-btn slot="activator" icon @click="updateSaleable(props.item.id, !props.item.isactive)">
                            <i class="el-icon-upload2" v-if="!props.item.isactive"/>
                            <i class="el-icon-download" v-else/>
                        </v-btn>
                        <span v-if="!props.item.isactive"> 上架商品</span>
                        <span v-else> 下架商品</span>
                    </v-tooltip>
                </td>
            </template>
        </v-data-table>
        <!--弹出的对话框-->
    </v-card>
</template>

<script>
    export default {
        name: "order",
        data() {
            return {
                status:true,
                headers: [
                    {text: '订单编号', align: 'center', sortable: false, value: 'id'},
                    {text: '会员id', align: 'center', sortable: false, value: 'memberid'},
                    {text: '创建时间', align: 'center', sortable: true, value: 'createtime'},
                    {text: '订单总额', align: 'center', value: 'subtotal', sortable: false,},
                    {text:'订单状态',align:'center', value: 'state',sortable:false},
                    {text: '操作', align: 'center', sortable: false}
                ],
                orderList:[],
                totalOrders:0,
                loading:true,
                pagination:{},
                search:{
                    id:null,
                },

            }
        },
        mounted(){
          this.getDataFromServer();
        },
        watch: {
            pagination: { // 监视pagination属性的变化
                deep: true, // deep为true，会监视pagination的属性及属性中的对象属性变化
                handler() {
                    // 变化后的回调函数，这里我们再次调用getDataFromServer即可
                    this.getDataFromServer();
                }
            },
            status() {
                this.refresh();
            },
        },
        methods:{
            refresh() {
                if (this.pagination.page !== 1) {
                    this.pagination.page = 1;
                    return;
                }
                this.getDataFromServer();
            },
            getDataFromServer() { // 从服务的加载数的方法。

                // 发起请求
                this.$http.get("/order/list", {
                    params: {
                        query: this.search.id || null, // 搜索条件
                        page: this.pagination.page,// 当前页
                        rows: this.pagination.rowsPerPage// 每页大小
                    }
                }).then(resp => { // 这里使用箭头函数
                    this.orderList = resp.data.data.list;
                    this.totalOrders = resp.data.total;
                    // 完成赋值后，把加载状态赋值为false
                    this.loading = false;
                }).catch(()=>{
                    this.loading = false;
                    this.$message.info("查询的订单不存在，换个条件试试！");
                })
            },
        }
    }
</script>

<style scoped>

</style>
